<!DOCTYPE html>
<html lang="zh-cn">
<#include "../include/resource-head.ftl"/>
<link rel="stylesheet" href="/themes/plugins/etalage/css/etalage.css">
<body>
<#include "../include/common-header.ftl"/>
<div class="content-index col-center-block no-padding">
    <div id="carousel" class="carousel slide" data-ride="carousel">

        <ol class="carousel-indicators">
        <#if foodImgList??>
            <#list foodImgList as item>
                <li data-target="#carousel" data-slide-to="${item?index}" <#if item?is_first>class="active"</#if>></li>
            </#list>
        </#if>
        </ol>

        <div class="carousel-inner" role="listbox">
        <#if foodImgList??>
            <#list foodImgList as item>
                <div class="item <#if item?is_first>active</#if>">
                    <img src="/data/${item.path!}" alt="...">
                </div>
            </#list>
        </#if>
        </div>

        <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div class="note-box" style="height: 300px">
        <div class="box-title text-center">
            <h4>${foodModel.name!}</h4>
        </div>
        <p style="text-indent: 2em;padding: 16px">${foodModel.descript!}</p>
    </div>
    <div class="note-box2 ">
        <div class="row" style="padding: 0 15px ">
            <h4 class="text-red pull-left">￥${foodModel.price?string("#0.00")}元</h4>
        <#if foodModel.oldprice?? && foodModel.oldprice gt 0>&nbsp;&nbsp;&nbsp;&nbsp;<del>${foodModel.oldprice}</del></#if>
            <span onclick="collect('${foodModel.id}',this)" class="color-grey pull-right" style="cursor: pointer">
                <i class="icon icon-2x <#if foodModel.collect == 0>icon-star-empty<#else>icon-star</#if>">&nbsp;</i>
            </span>
        </div>
        <div class="row" style="padding: 6px 15px ">
            <input type="number" value="1" id="number" class="pull-left form-control" style="width: 100px">
            <a class="pull-right btn btn-success btn-sm" onclick="joinCar()">加入餐车</a>
        </div>
    </div>
</div>
<div class="container col-center-block">
    <div class="goods-detail">
        <div class="goods-box">
            <h3>餐品介绍</h3>
            <div class="box-content">${foodModel.content!}</div>
        </div>
    </div>
</div>
<#include "../include/common-foot.ftl"/>
</body>
<#include "../include/resource-script.ftl"/>
<script>
    function joinCar() {
        var id = "${foodModel.id}";
        var num = $("#number").val();
    <#if sessionUser??>
        saveItem(id, num);
    <#else>
        alert("请先登录");
    </#if>
    }
</script>
</html>